<template>
	<view class="content">
		<view class="content-t">
			<u-search @change="changeipt" shape="square" placeholder="520元礼包抢先领" v-model.trim="keyword"
				@search="sousuo(keyword)" action-text="取消" @custom="back">
			</u-search>
			<view v-show="isshow == 1">
				<view class="list" v-for="item,index in arr3" :key="index" @click="sousuoxiala(item)">{{item}}</view>
			</view>
			<view class="top" v-if="isshow == 0">
				<view class="top-t">
					<text>历史记录</text>
					<u-icon name="trash" size="40rpx" @click="jilu"></u-icon>
				</view>
				<u-tag mode="plain" v-for="item,index in arr" :key="index" :text="item" type="info"
					@click="sousuoxiala(item)" />
			</view>
		</view>
		<view class="content-b" v-if="isshow == 0">
			<view class="btm">
				<text>热门搜索</text>
			</view>
			<view class="btm-b">
				<u-tag mode="plain" v-for="item,index in arr2" :key="index" :text="item.keyword" type="info"
					@click="sousuoxiala(item.keyword)" />
			</view>
		</view>
		<view class="bgc" v-show="isshow == 2">
			<u-dropdown class="xiala">
				<u-dropdown-item title="综合" :disabled="true"></u-dropdown-item>
				<u-dropdown-item @change="pick('price')" v-model="value1" title="价格" :options="options1">
				</u-dropdown-item>
				<u-dropdown-item @change="pick" v-model="value2" title="分类" :options="options2"></u-dropdown-item>
			</u-dropdown>
			<view class="goodlist">
				<view class="shangpin" v-for="item,index in arr5" :key="index">
					<image :src="item.list_pic_url" mode=""></image>
					<!-- <u-lazy-load :image="item.list_pic_url" :loading-img="loadingImg" ></u-lazy-load> -->
					<view style="text-align: center;">{{item.name}}</view>
					<view style="color: darkred;">￥{{item.retail_price.toFixed(2)}}元</view>
				</view>
			</view>
		</view>
		<view class="wu" v-show="isshow == 3">
			<image src="https://img01.yzcdn.cn/vant/empty-image-search.png" mode=""></image>
			<view class="">暂无商品</view>
		</view>
		<u-popup v-model="Loding" mode="center" :mask-close-able="false">
			<view class="popflex">
				<u-loading mode="circle"></u-loading>
				<text>加载中...</text>
			</view>
		</u-popup>
		<view class="meiyou" v-show="isshow == 1">
			{{arr3.length>0?"没有更多了":"暂无数据"}}
		</view>
		<view class="meiyou" v-show="page >= allpage && isshow !== 1">
			没有更多了
		</view>
	</view>
</template>

<script>
	let timer = null
	let timer1 = null
	export default {
		data() {
			return {
				Loding: false,
				arr: [],
				arr2: [],
				arr3: [],
				arr4: [],
				arr5: [],
				keyword: "",
				token: "",
				flag: true,
				isshow: 0,
				value1: 0,
				value2: 0,
				page: 1,
				order: 'desc',
				categoryId: "0",
				allpage: 0,
				sort: "id",
				options1: [{
						label: '价格由高到低',
						value: 1,
					},
					{
						label: '价格由低到高',
						value: 2,
					}
				],
				options2: [],
			}
		},
		onLoad() {

		},
		onShow() {
			this.shuaxin()
		},
		onReachBottom() {
			clearTimeout(timer1)
			timer1 = setTimeout(() => {
				this.page++
				if (this.page <= this.allpage) {
					this.isLoding()
					this.$request({
						url: "goods/list",
						method: "GET",
						header: {
							"X-Nideshop-Token": this.token
						},
						data: {
							keyword: this.keyword,
							order: this.order,
							categoryId: this.categoryId,
							page: this.page,
							sort: this.sort,
						},
						successCb: res => {
							console.log(res);
							this.arr5.push(...res.goodsList)
							console.log(this.arr5);
						}
					})
				}
			}, 500)
		},
		methods: {
			isLoding() {
				this.Loding = true
				setTimeout(() => {
					this.Loding = false
				}, 400)
			},
			shuaxin() {
				let token = uni.getStorageSync("token");
				if (token) {
					this.token = token
					this.$request({
						url: "search/index",
						method: "GET",
						header: {
							"X-Nideshop-Token": this.token
						},
						successCb: res => {
							console.log(res);
							this.arr = res.historyKeywordList;
							this.arr2 = res.hotKeywordList;
						}
					})
				}
			},
			jilu() {
				this.$request({
					url: "search/clearhistory",
					method: "GET",
					header: {
						"X-Nideshop-Token": this.token
					},
					successCb: res => {
						this.shuaxin()
					}
				})
			},
			back() {
				this.isLoding()
				uni.navigateBack()
			},
			changeipt() {
				if (!this.flag) {
					this.flag = true
				} else {
					this.isshow = 1
					clearTimeout(timer);
					timer = setTimeout(() => {
						this.isLoding()
						this.$request({
							url: "search/helper",
							method: "GET",
							header: {
								"X-Nideshop-Token": this.token
							},
							data: {
								keyword: this.keyword,
							},
							successCb: data => {
								this.arr3 = data
							}
						})
					}, 500)
				}
			},
			sousuo(key) {
				this.isshow = 2;
				this.value1 = 0;
				this.value2 = 0;
				this.sort = 'id';
				this.page = 1;
				this.$request({
					url: "goods/list",
					method: "GET",
					header: {
						"X-Nideshop-Token": this.token
					},
					data: {
						keyword: key,
					},
					successCb: res => {
						this.isLoding()
						console.log(res);
						this.shuaxin();
						this.arr5 = res.goodsList
						console.log(this.arr5);
						if (this.arr5.length == 0) {
							this.isshow = 3
						}
						this.allpage = res.totalPages
						this.options2 = res.filterCategory.map((item, index) => {
							return {
								value: item.id,
								label: item.name
							}
						})
					}
				})
			},
			sousuoxiala(key) {
				this.flag = false
				this.keyword = key
				this.isshow = 2;
				this.value1 = 0;
				this.value2 = 0;
				this.sort = 'id';
				this.page = 1;
				this.$request({
					url: "goods/list",
					method: "GET",
					header: {
						"X-Nideshop-Token": this.token
					},
					data: {
						keyword: key,
					},
					successCb: res => {
						this.isLoding()
						console.log(res);
						this.options2 = res.filterCategory.map((item, index) => {
							return {
								value: item.id,
								label: item.name
							}
						})
						this.arr5 = res.goodsList
						if (this.arr5.length == 0) {
							this.isshow = 3
						}
						this.allpage = res.totalPages
					}
				})
			},
			pick(sort) {
				if (sort == "price") {
					this.sort = sort
				}
				this.order = (this.value1 == 1) ? 'desc' : 'asc'
				this.categoryId = String(this.value2)
				this.page = 1
				console.log(this.order, this.categoryId, this.page, this.keyword, this.sort);
				this.$request({
					url: "goods/list",
					method: "GET",
					header: {
						"X-Nideshop-Token": this.token
					},
					data: {
						keyword: this.keyword,
						order: this.order,
						categoryId: this.categoryId,
						page: this.page,
						sort: this.sort,
					},
					successCb: res => {
						this.isLoding()
						console.log(res);
						this.arr5 = res.data
						if (this.arr5.length == 0) {
							this.isshow = 3
						}
						console.log(this.arr5);
					}
				})
			}
		}
	}
</script>

<style>
	.content-t,
	.content-b {
		background-color: #fff;
		padding: 30rpx;
	}

	.content-b {
		margin-top: 40rpx;
	}

	.list {
		line-height: 80rpx;
		border-bottom: 1px solid #eee;
	}

	.top {
		margin-top: 40rpx;
	}

	text {
		font-size: 40rpx
	}

	.top-t {
		display: flex;
		justify-content: space-between;
	}

	.u-tag {
		margin: 10rpx;
	}

	.btm-b>.u-tag:first-child,
	.btm-b>u-tag:first-child view {
		color: red !important;
		border-color: red !important;
	}

	.xiala {
		box-shadow: 0 4rpx 24rpx rgb(100 101 102 / 12%);
		z-index: 10;
	}

	.bgc {
		background-color: #fff;
	}

	.goodlist {
		display: flex;
		flex-wrap: wrap;
	}

	.shangpin {
		width: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.wu {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.wu image {
		width: 320rpx;
		height: 320rpx;
	}

	.meiyou {
		width: 100%;
		text-align: center;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
	}

	image {
		width: 100%;
		height: 375rpx;
	}

	page {
		background-color: #eee;
	}
</style>
